<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑学习网</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       <h3>小黑学习网</h3>
       <!-- 绑定value -->
       姓名：<input type="text" v-model="name"><br><br>
       <!-- 绑定checkd -->
       是否单身 <input type="checkbox" v-model="isSingle" ><br><br>
       性别：
             男<input v-model="gender" value="1" name="gender" type="radio" v-model="change" >
             女<input v-model="gender" value="2" name="gender"  type="radio"><br><br>
       所在城市：<select v-model="cityID">
        <option value="101" >北京</option>
        <option value="102" >上海</option>
        <option value="103" >成都</option>
        <option value="104" >南京</option>
       </select>
       <br><br>
       自我描述：
       <textarea v-model="desc"></textarea>
    </div>
</body>
<script>
   const app=new Vue({
    el:'#app',
    data:{
        name:"",
        isSingle:true,
        gender:"1",
        cityID:'102',
        desc:"",
    }
   })
</script>
</html>